<template>
    <Row>
        <i-col span="8" v-if="xq_displayed">
            <Select v-model="xqSelected" clearable style="width:150px" placeholder="请选择县/区" :disabled="xq_select_disabled">
                <Option v-for="item in xqList" :value="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>
        </i-col>
        <i-col span="8" v-if="jd_displayed">
            <Select v-model="jdSelected" clearable style="width:150px" placeholder="请选择乡镇/街道" :disabled="jd_select_disabled">
                <Option v-for="item in jdSelectedList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </i-col>
        <i-col span="8" v-if="sq_displayed">
            <Select v-model="sqSelected" clearable style="width:150px" placeholder="请选择社区/村" :disabled="sq_select_disabled">
                <Option v-for="item in sqSelectedList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </i-col>
    </Row>
</template>
<script>
    import { postAction } from '@/api/request'
    export default {
        name: 'Ss01001Tag',
        //父组件调用入参
        props: {
            //TODO 是否启用撤销日期模式 ：后台查询  当前系统日期在 设立日期和撤销日期范围内
            enable_cancel_date:{
                type: Boolean,
                required: false,
                default: false,
            },
            //三级级联级别 1：县区 2：街道 3：社区
            level: {
                type: String,
                required: false,
                default: '3',
            },
            //县区默认选中的value
            xq_value: {
                type: String,
                required: false
            },
            //街道默认选中的value
            jd_value:{
                type: String,
                required: false
            },
            //社区默认选中的value
            sq_value:{
                type: String,
                required: false
            },
            //社区 是否可用
            sq_disabled:{
                type: Boolean,
                required: false
            },
            //街道 是否可用
            jd_disabled:{
                type: Boolean,
                required: false
            },
            //县区是否可用
            xq_disabled:{
                type: Boolean,
                required: false
            },
        },
        data () {
            return {
                sq_displayed:true,
                jd_displayed:true,
                xq_displayed:true,
                sq_select_disabled:false,
                jd_select_disabled:false,
                xq_select_disabled:false,
                xqSelected:'',
                jdSelected:'',
                sqSelected:'',
                xqList: [],
                jdList: [],
                jdSelectedList: [],
                sqList: [ ],
                sqSelectedList: []
            }
        },
        methods: {
        },
        mounted: function() {
        },
        watch:{

            sq_disabled(newvalue,oldvalue){
                this.sq_select_disabled = newvalue
            },
            jd_disabled(newvalue,oldvalue){
                this.jd_select_disabled = newvalue
            },
            xq_disabled(newvalue,oldvalue){
                this.xq_select_disabled = newvalue
            },
            xq_value(newvalue,oldvalue){
                //监控入参
                //conso.log("接收xq_value:"+newvalue)
                this.xqSelected = newvalue;
            },
            jd_value(newvalue,oldvalue){
                //监控入参
                //conso.log("接收jd_value:"+newvalue)
                this.jdSelected = newvalue;
            },
            sq_value(newvalue,oldvalue){
                //监控入参
                //conso.log("接收sq_value:"+newvalue)
                this.sqSelected = newvalue;
            },
            xqSelected: function () {
                // 清除街道
                this.jdSelected = '';
                this.jdSelectedList=[];
                //设置该县区下的街道
                for(let j = 0,len=this.jdList.length; j < len; j++) {
                    if(this.xqSelected==this.jdList[j].parentId) {
                        this.jdSelectedList.push(this.jdList[j]);
                    }
                }
                ////默认选中【2】
                //conso.log("watch xq_value::"+ this.xq_value)
                //conso.log("watch xqSelected::"+ this.xqSelected)
                if(this.xq_value!=undefined && this.jd_value!=undefined) {
                    this.jdSelected =this.jd_value;
                }
                if(this.xqSelected!=undefined) {
                    //回传给父组件
                    this.$emit("update:bindData", this.xqSelected)
                    this.$emit("update:bindLevel", "1")
                } else{
                    this.$emit("update:bindData", "")
                    this.$emit("update:bindLevel", "1")
                }
            },
            jdSelected: function () {
                // 清除社区
                this.sqSelected = '';
                this.sqSelectedList=[];
                for(let j = 0,len=this.sqList.length; j < len; j++) {
                    if(this.jdSelected==this.sqList[j].parentId) {
                        this.sqSelectedList.push(this.sqList[j]);
                    }
                }
                if(this.jdSelected!=undefined && this.sq_value!=undefined) {
                    this.sqSelected =this.sq_value;
                }
                if(this.jdSelected!=undefined){
                    this.$emit("update:bindData", this.jdSelected)
                    this.$emit("update:bindLevel", "2")
                }else {
                    //如果页面点击取消 街道下拉框，则返回县区选中值
                    this.$emit("update:bindData", this.xqSelected)
                    this.$emit("update:bindLevel", "1")
                }


            },
            sqSelected: function () {
                //conso.log("sqSelected:"+this.sqSelected)
                if(this.sqSelected!=undefined){
                    this.$emit("update:bindData", this.sqSelected)
                    this.$emit("update:bindLevel", "3")
                } else {
                    //如果页面点击取消 社区下拉框，则返回街道选中值
                    this.$emit("update:bindData", this.jdSelected)
                    this.$emit("update:bindLevel", "2")
                }
            }
        },
        created () {
            //加载所有区划
            //conso.log("xzqh create=========")
            var that=this;
            var dataParam = {
                // level: this.level
            }
            postAction('/api/ac/subsistence/ss01001Service/xzqhList', dataParam).then((res) => {
                that.xqList = res.data.data.xqdata;
                that.jdList = res.data.data.jddata;
                that.sqList = res.data.data.sqdata;
            }).finally(() => {
                //默认选中【1】
                // 标签<Ss01001Tag :xq_value="sel_xqval" :jd_value="sel_jdval" :sq_value="sel_sqval">
                //如配置则默认选中对应的下拉框
                if(that.xq_value != undefined) {
                    that.xqSelected = that.xq_value;
                }
                if(that.jd_value != undefined) {
                    that.jdSelected = that.jd_value;
                }
                if(that.sq_value != undefined) {
                    that.sqSelected = that.sq_value;
                }
            })
            that.sq_select_disabled = that.sq_disabled
            that.jd_select_disabled = that.jd_disabled
            that.xq_select_disabled = that.xq_disabled
            if(that.level=='3') {
                that.sq_displayed = true
                that.jd_displayed = true
                that.xq_displayed = true
            } else if(that.level=='2') {
                that.sq_displayed = false
                that.jd_displayed = true
                that.xq_displayed = true
            } else if(that.level=='1') {
                that.sq_displayed = false
                that.jd_displayed = false
                that.xq_displayed = true
            }

        }
    }
</script>
